import React, { useState, useEffect, useRef } from 'react'
import axios from 'axios'
import { useNavigate, Outlet, useSearchParams } from 'react-router-dom'
import './pasword.css'
import { Form, Input, Button } from 'antd-mobile'
import { Notify, Cell } from 'react-vant';
import CountdownTimer from '../../../component/SetTime/CountdownTimer'
axios.defaults.baseURL = 'http://127.0.0.1:3000'
const List = () => {
    const [params] = useSearchParams()
    const phones = params.get('phone')
    const hanleClick = async () => {
        setState(true)
        await axios.post('/System/get_sms', { phone: phone }).then(res => {
            if (res.data.code == '0') {
                setSms(res.data.sms)
            }
        })
    }
    const handleTo = () => {
        if (yzm == '') {
            Notify.show({ type: 'warning', message: '请输入验证码！！！' })
        } else {
            if (sms != yzm) {
                Notify.show({ type: 'danger', message: '验证码输入不正确！！！' })
            } else {
                navigater(`/buddha?phone=${phone}`)
            }
        }
    }
    //接收的手机号
    const [phone, setPhone] = useState('15613291746')
    const navigater = useNavigate()
    const [state, setState] = useState(false)
    const [yzm, setYzm] = useState('')
    //接收的验证码
    const [sms, setSms] = useState('')
    return (
        <div className='pasword-liao'>

            <div className="order-title" style={{ background: " #f7f7f7" }}>
                <div className="t1" onClick={() => { window.history.back() }}><svg t="1730286914624" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16962" width="200" height="200"><path d="M622.927311 789.137615c-6.503881 0-13.007763-2.16796-18.066337-7.226535l-231.249118-231.249118c-10.117149-10.117149-15.898377-23.847565-15.898377-39.023289 0-14.45307 5.781228-28.183486 15.898377-39.023288l231.971771-231.971772c10.117149-10.117149 26.015526-10.117149 35.410022 0 10.117149 10.117149 10.117149 26.015526 0 35.410021l-231.249118 231.971772c-0.722653 0.722653-1.445307 2.16796-1.445307 2.890614 0 0.722653 0 2.16796 1.445307 2.890614l231.249118 231.249118c10.117149 10.117149 10.117149 26.015526 0 35.410021-5.058574 5.781228-11.562456 8.671842-18.066338 8.671842z" fill="#2c2c2c" p-id="16963"></path></svg></div>
                <div className="t2"><span></span></div>
                <div className="t3"></div>
            </div>
            <div className="pasword-body">
                <p className='pasword-p1'>修改手机号</p>
                <p className='pasword-p2'>请输入{phones}的短信验证码,完成安全验证~</p>
                <div className="pasword-input">
                    <Form layout='horizontal'>
                        <Form.Item
                            extra={
                                <div>
                                    <Button className='pasword-but' onClick={() => hanleClick()}>{
                                        state ? <CountdownTimer seconds={60} /> : '发送验证码'
                                    }
                                    </Button>
                                </div>
                            }
                        >
                            <Input placeholder='请输入验证码' clearable value={yzm} onChange={(e) => setYzm(e)} />
                        </Form.Item>
                    </Form>
                </div>
                <div className="pasword-button">
                    <Button block color='primary' size='large' onClick={() => handleTo()}>
                        下一步
                    </Button>
                </div>
            </div>
        </div>
    )
}
export default List